<template>
  <!-- form表单的约定，双向绑定v-model="formData" -->
  <!-- v-model 绑定的就是modelValue的属性 -->
  <el-form :model="formData" label-width="120px">
      <el-form-item label="商品名称">
          <el-input v-model="formData.name" />
      </el-form-item>

      <el-form-item label="商品图片">
          <Tuku v-model="formData.img"></Tuku>
      </el-form-item>

      <el-form-item label="父类">
         <CategoryTree v-model="formData.parentId"></CategoryTree>
      </el-form-item>

      <el-form-item label="排序">
          <el-input-number v-model="formData.seq" :min="1" :max="99" />
          <!-- <el-input v-model="formData.name"/> -->
      </el-form-item>

      <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>

      </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
// ref 是针对某一个变量的引用，reactive 是针对对象的引用

import Tuku from "@/components/Tuku.vue";
import { categoryApi } from "@/api";
import { ElMessage } from 'element-plus'

import CategoryTree from "@/components/CategoryTree.vue";
import { useRoute } from "vue-router";
const route = useRoute()
// 因为formData 是一个对象
const formData = reactive({
  id:0,
  name: "",
  img: "",
  seq: 1,
  parentId: 0
})
// const categoryData = ref([
//     {
//         value: 0,
//         label: '一级分类',
//  
// ])
onMounted(() => {
  formData.id = Number(route.query.id)
  // console.log(formData.id);
  callCategoryApi()


  // callCategoryApi()

  // 是扁平化的数据转成树形结构
  // let henan = ["烩面", "道口烧鸡", "胡辣汤", "灌汤包", "花生糕", "黄牛肉"]
  // let eatFoods = henan.reduce((duzi: any, currentValue: any) => {
  //     if (currentValue == "道口烧鸡") { duzi.push(currentValue) }
  //     if (currentValue == "黄牛肉") { duzi.push(currentValue) }
  //     return duzi;
  // }, [])
  // console.log(eatFoods);

})

const callCategoryApi = ()=>{
  categoryApi.select.call({id:formData.id}).then((res:any)=>{
    // console.log(res);
    formData.name = res[0].name
    formData.img = res[0].img
    // console.log(formData.img);
    
    formData.seq = res[0].seq
    formData.parentId = res[0].parentId
  })
}
// onSubmit是一个方法 
const onSubmit = () => {
  console.log(formData);
  categoryApi.update.call(formData).then(() => {
      // console.log(res);
      ElMessage.success('保存成功')
      // callCategoryApi()
  })
}

</script>